<template>
  <view v-if="!isLoading" class="container" :style="'background-image:url('+$xyfun.image('/static/other/detail-bg.png')+')'">
    <view class="flow" @tap="$xyfun.to('/pages/user/order')">
      <view class="item">
        <view class="yz-iconfont yz-gouxuan"></view>
        <text>下单</text>
      </view>
      <view class="item">
        <view class="yz-iconfont yz-gouxuan" v-if="detail.status>1"></view>
        <view class="yz-iconfont yz-yuanxingweixuanzhong" v-else></view>
        <text>接单中</text>
      </view>
      <view class="item">
        <view class="yz-iconfont yz-gouxuan" v-if="detail.status>2"></view>
        <view class="yz-iconfont yz-yuanxingweixuanzhong" v-else></view>
        <text>试课中</text>
      </view>
      <view class="item">
        <view class="yz-iconfont yz-gouxuan" v-if="detail.status==3"></view>
        <view class="yz-iconfont yz-yuanxingweixuanzhong" v-else></view>
        <text>已完成</text>
      </view>
    </view>
    <view class="detail" style="margin-top: -50rpx" @tap="$xyfun.to('/pages/user/order')">
      <view class="teaching">
        <view class="gay" @click.stop="$xyfun.to('/pages/teacher/detail?id='+detail.teacher_id)">
          <view class="avatar">
            <image :src="$xyfun.image(detail.teacher_avatar)"></image>
          </view>
          <view class="nickname">{{detail.teacher}}</view>
          <view class="role">
            老师
            <text class="yz-iconfont yz-xingbie-nan" v-if="detail.teacher_sex=='男'"></text>
            <text class="yz-iconfont yz-xingbie-nv" v-else></text>
          </view>
        </view>
        <view class="line">
          <view class="yz-iconfont yz-lianjie"></view>
        </view>
        <view class="gay">
          <view class="avatar">
            <image :src="$xyfun.image(detail.student_avatar)"></image>
          </view>
          <view class="nickname">{{detail.student}}</view>
          <view class="role">
            学生
            <text class="yz-iconfont yz-xingbie-nan" v-if="detail.student_sex=='男'"></text>
            <text class="yz-iconfont yz-xingbie-nv" v-else></text>
          </view>
        </view>
      </view>
      <view class="lists">
        <view class="item">
          <view class="tit">订单号</view>
          <view class="value">{{detail.order_sn}}</view>
        </view>
        <view class="item">
          <view class="tit">订单状态</view>
          <view class="value">{{detail.status_text}}</view>
        </view>
        <view class="item">
          <view class="tit">下单时间</view>
          <view class="value">{{$xyfun.timeFormat(detail.createtime)}}</view>
        </view>
        <view class="item">
          <view class="tit">首次上课时间</view>
          <view class="value">{{detail.first_teacher}}</view>
        </view>
        <view class="item">
          <view class="tit">首次试课后支付给老师金额</view>
          <view class="value tc-r">
            <text class="ts-32 tb">￥{{detail.money}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="detail" v-if="detail.status>1" @tap="$xyfun.to('/pages/user/order')">
      <view class="lists">
        <view class="item">
          <view class="tit">科目</view>
          <view class="value">{{detail.subject_text}}</view>
        </view>
        <view class="item">
          <view class="tit">年级</view>
          <view class="value">{{detail.grade_text}}</view>
        </view>
        <view class="item">
          <view class="tit">学生电话</view>
          <view class="value mobile" @click.stop="call(detail.student_mobile)">{{detail.student_mobile}}<text class="yz-iconfont yz-dianhua"></text></view>
        </view>
        <view class="item">
          <view class="tit">详细地址</view>
          <view class="value">{{detail.addr}}</view>
        </view>
        <view class="item">
          <view class="tit">学生基本情况</view>
          <view class="value">{{detail.state}}</view>
        </view>
      </view>
    </view>
    <view class="detail" @tap="$xyfun.to('/pages/teacher/detail?id='+detail.teacher_id)" v-if="detail.status>1">
      <view class="lists">
        <view class="item">
          <view class="tit">{{detail.teacher}}老师</view>
          <view class="value"></view>
        </view>
        <view class="item">
          <view class="tit">老师电话</view>
          <view class="value mobile" @click.stop="call(detail.teacher_mobile)">{{detail.teacher_mobile}}<text class="yz-iconfont yz-dianhua"></text></view>
        </view>
        <view class="item">
          <view class="tit">昵称</view>
          <view class="value">{{detail.nickname}}</view>
        </view>
      </view>
      <view class="more">点击查看更多...</view>
    </view>


    <view class="tool" v-if="detail.status===2 && user.info.id==detail.user_id">
      <view @tap="commentBut">评价</view>
    </view>

    <view class="tool" v-if="detail.status===-2 && user.info.id==detail.user_id">
      <view @tap="$xyfun.to('/pages/teacher/detail?id='+detail.teacher_id)">重新试课该老师</view>
      <view @tap="$xyfun.to('/pages/teacher')">重新试课其他老师</view>
    </view>

    <!--教师评价-->
    <block>
      <view class="xy-modal-box xy-modal-box-center qrcode-model-box p-tb-20 p-lr-30 br-10 bg-w" :class="[commentShow?'xy-modal-show':'']">
        <view class="com_grade" v-if="commentShow">
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=1?'color:#ff5722':''" @tap="com_grade=1"></view>
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=2?'color:#ff5722':''" @tap="com_grade=2"></view>
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=3?'color:#ff5722':''" @tap="com_grade=3"></view>
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=4?'color:#ff5722':''" @tap="com_grade=4"></view>
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=5?'color:#ff5722':''" @tap="com_grade=5"></view>
        </view>
        <view class="comment" v-if="commentShow">
          <textarea @input="commentInput" placeholder="请填写对老师的真实评价"></textarea>
          <view class="combut" @tap="comment_submit">提交评论</view>
        </view>
      </view>
      <view class="xy-modal-mask" :class="[commentShow?'xy-mask-show':'']" @tap="commentShow =!commentShow"></view>
    </block>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      isLoading : true,
      detail : [],
      id : '',
      com_grade: 5,
      comment: '',
      commentShow: false,
    };
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad(options) {
    this.id = options.id;
    this.loadData();
  },
  methods: {
    async loadData() {
      this.$api.postBase({
        url: 'teacher/teacher_order_detail',
        loadingTip: '加载中...',
        data: {
          id : this.id
        },
        success: res => {
          this.isLoading = false;
          this.detail = res;
        }
      })
    },
    //提交评论
    comment_submit(){
      var that = this;
      this.$api.postBase({
        url : '/teacher/comment',
        loadingTip:'加载中...',
        data : {
          order_id : this.detail.id,
          teacher_id : this.detail.teacher_id,
          content : this.comment,
          star : this.com_grade
        },
        success: res=>{
          this.$xyfun.msg('评论成功');
          that.commentShow = false;
          that.loadData();
        }
      })
    },
    //写入评论
    commentInput(e){
      this.comment = e.detail.value;
    },
    //评论按钮
    commentBut(){
      this.commentShow = true;
    },
    //拨打电话
    call(mobile){
      uni.makePhoneCall({
        phoneNumber : mobile,
      })
    },
    //退券
    refund(){
      var that = this;
      this.$api.postBase({
        url: 'teacher_order/refund',
        loadingTip: '加载中...',
        data: {
          id : that.id
        },
        success: res => {
          that.$xyfun.msg('退券成功')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container{
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: 300rpx;
  padding-bottom: 150rpx;
  min-height: 100vh;
}
.flow{
  display: flex;
  justify-content: space-between;
  background: linear-gradient(to bottom,#00a0ea,#00a0ea, rgba(0, 160, 234, 0.55),#fff);
  height: 300rpx;
  box-sizing: border-box;
  padding: 0 80rpx;
  position: relative;
  &:after{
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 120rpx;
    background: rgba(255, 255, 255, 0.75);
    display: block;
    width: calc(100% - 240rpx);
    height: 5rpx;
  }
  .item{
    margin-top: 98rpx;
    height: 110rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100rpx;
    z-index: 1;
    view{
      background: #00a0ea;
      font-size: 45rpx;
      border-radius: 50%;
      width: 45rpx;
      height: 45rpx;
      text-align: center;
      margin-bottom: 20rpx;
    }
    text{
      font-size: 28rpx;
    }
  }
}
.detail{
  width: 90%;
  margin: 20rpx auto 0 auto;
  background: rgba(255, 255, 255, 0.66);
  position: relative;
  z-index: 99;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.09);
  border-radius: 20rpx;
  overflow: hidden;
  padding-bottom: 30rpx;
  .teaching{
    display: flex;
    width: 500rpx;
    margin: 50rpx auto 0 auto;
    justify-content: space-between;
    border-bottom: 1rpx solid rgba(204, 204, 204, 0.34);
    padding-bottom: 20rpx;
    .gay{
      width: 100rpx;
      text-align: center;
      .avatar{
        position: relative;
        image{
          width: 100rpx;
          height: 100rpx;
          box-sizing: border-box;
          border-radius: 50rpx;
          box-shadow: 0 0 5rpx #000;
        }
      }
      .nickname{
        margin-top: 10rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #555;
      }
      .role{
        font-size: 24rpx;
        color: #555;
        text{

        }
        .yz-xingbie-nv{
          color: #fca8ae;
        }
        .yz-xingbie-nan{
          color: #568adf;
        }
      }
    }
    .line{
      width: 140rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      color:#ed8c1b;
      border-bottom: 5rpx dashed #ed8c1b;
      margin-top: 10rpx;
      padding-bottom: 10rpx;
      view{
        font-size: 24rpx;
        margin-top: 10rpx;
        background: #ed8c1b;
        color: #fff;
        width: 50rpx;
        height: 50rpx;
        border-radius: 25rpx;
        line-height: 50rpx;
        text-align: center;
      }
    }
  }
}

.lists{
  padding: 0 40rpx;
  margin-top: 50rpx;
  .item{
    margin: 20rpx 0;
    display: flex;
    justify-content: space-between;
    .tit{
      font-size: 28rpx;
      font-weight: bold;
      white-space: nowrap;
      margin-right: 50rpx;
    }
    .value{
      font-size: 26rpx;
      .yz-iconfont{
        color: $uni-color-warning;
        font-size: 34rpx;
        margin-left: 10rpx;
      }
    }
    .mobile{
      font-size: 32rpx;
      .yz-iconfont{
        font-size: 40rpx;
      }
    }
  }
}
.more{
  text-align: center;
  font-size: 24rpx;
  color: #555;
}
.tool{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 99;
  opacity: 1;
  height: 90rpx;
  background: #fff;
  box-shadow: 10rpx -10rpx 20rpx rgba(208, 208, 208, 0.62);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  view{
    background: $uni-color-warning;
    min-width: 200rpx;
    padding: 0 30rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 30rpx;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
    margin-left: 20rpx;
  }
}

.com_grade{
  display: flex;
  margin-top: 30rpx;
  margin-bottom: 40rpx;
  view{
    font-size: 36rpx;
    margin-right: 20rpx;
    color: #c1c1c1;
  }
}
.comment{

  textarea{
    z-index: 0;
  }
  .combut{
    background: #ed8c1b;
    color: #fff;
    width: 300rpx;
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 30rpx;
    text-align: center;
    float: right;
  }
}
</style>
